<h2 mat-dialog-title>
    {{data.name|uppercase}}{{'home.readingRecord.title.prefix' | translate}}{{recordList.length}}{{'home.readingRecord.title.last' | translate}}
</h2>
<div mat-dialog-content>
    <mgl-timeline [toggle]="toggle" [alternate]="alternate" [side]="side">
        <mgl-timeline-entry *ngFor="let record of recordList; let i = index;" 
            (expand)="onExpandEntry($event, i)">
            <mgl-timeline-entry-header 
                (click)="onHeaderClick($event)" 
                style="height: 40px; padding: 0">
                <ion-label color="dark" class="ion-float-left" style="width: 360px;">
                    <ion-text class="ion-float-left" style="width: 350px;">
                        <b>{{record.dateCreated | readableDate | async}}</b> - <i>{{record.dateCreated | date : 'yyyy-MM-dd HH:mm:ss' : 'GMT+8' }}</i>
                    </ion-text>
                </ion-label>
            </mgl-timeline-entry-header>
            <mgl-timeline-entry-content [expandAnimationTiming]="contentAnimation ? '200ms ease' : '0ms'"      
                              [collapseAnimationTiming]="contentAnimation ? '100ms ease' : '0ms'">
                <div>
                    <div>
                        <ion-button color="medium" (click)="moveTo(record.path)">
                            {{record.chapterTitle}}
                            <ion-icon name="arrow-redo-outline"></ion-icon>
                        </ion-button>

                        <ion-button size="small" 
                                    color="medium" 
                                    (click)="moveTo(record.path, record.sectionAnchor)" *ngIf="record.sectionAnchor.length > 0">
                            {{record.sectionAnchor | uppercase}}
                            <ion-icon name="arrow-redo-outline"></ion-icon>
                        </ion-button>
                    </div>
                </div>
            </mgl-timeline-entry-content>
            <mgl-timeline-entry-dot [class]="color ? 'primary' : 'accent'" 
                                      [size]="size"
                                      (click)="onDotClick($event)"
                                      [expandAnimationTiming]="dotAnimation ? '200ms ease' : '0ms'"
                                      [collapseAnimationTiming]="dotAnimation ? '100ms ease' : '0ms'" >
            </mgl-timeline-entry-dot>
        </mgl-timeline-entry>
    </mgl-timeline>
</div>
<div mat-dialog-actions>
    <button mat-button matDialogClose>{{'home.readingRecord.actions.cancel' | translate}}</button>
</div>
